@use 'variable/breakpoint' as *;
.card-1-v2 {
  color: var(--mat-sys-on-primary);
  a {
    color: var(--mat-sys-on-primary);
  }
}

.card-content {
  .media {
    box-shadow: 0 3px 4px 0 rgb(0 0 0 / 50%);

    ::ng-deep {
      img {
        transform: scale(1);
        transition: transform 0.25s ease-in-out;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  &:hover {
    .media {
      ::ng-deep {
        img {
          transform: scale(1.05);
        }
      }
    }
  }
  .title {
    ::ng-deep a {
      @apply line-clamp-2;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

@media #{$gt-sm} {
  .card-1-v2 {
    height: calc(100% - 54px);
    .card-content {
      .media {
        top: -54px;
      }
      .title {
        font-size: 20px;
      }
    }
  }
}
